<script setup>
import {getCurrentInstance, defineEmits, ref, onMounted, watch, reactive} from "vue";
import {searchTreeMenus} from "@/api/basal.js"
import {ResultEnums} from "@/enums/ResultStatusEnums.js";
const emit = defineEmits(['innerLink'])
const menus = ref([])
const {proxy} = getCurrentInstance();
const tag = ref([])
onMounted(() => {
  let meta = proxy.$route.meta;
  let page = meta?(meta.page?meta.page:[]):[];
  tag.value = [proxy.$route.fullPath,...page]
  searchTreeMenus(import.meta.env.VITE_SYSTEM_CODE,'sidePanel').then(result => {
    menus.value = result.code === ResultEnums.SUCCESS ? result.data : menus.value;
  })
})
watch(() => proxy.$route.fullPath, (toPath) =>  {
  let meta = proxy.$route.meta;
  let page = meta?(meta.page?meta.page:[]):[];
  tag.value = [toPath,...page]
})
function isActive(path){
  return tag.value.includes(path)?'active':'';
}
function clickLink(e,menu){
  e.preventDefault();
  emit('innerLink',menu.menuUrl,{})
}
</script>
<template>
  <div class="app-sidepanel-footer" v-if="menus && menus.length> 0">
    <nav class="app-nav app-nav-footer">
      <ul class="app-menu footer-menu list-unstyled">
        <li class="nav-item" :class="(menu.children && menu.children.length>0)?' has-submenu':''"
            v-for="menu in menus" :key="menu.id">
          <template v-if="menu.children && menu.children.length>0">
            <a class="nav-link submenu-toggle " :class="isActive(menu.menuUrl)" data-bs-toggle="collapse" :data-bs-target="`#submenu-${menu.id}`"
               aria-expanded="false" :aria-controls="`submenu-${menu.id}`">
              <span class="nav-icon" v-if="menu.menuIcon"><i class="bi " :class="menu.menuIcon"></i></span>
              <span class="nav-link-text">{{ menu.menuName}}</span>
              <span class="submenu-arrow">
               <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
	                <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
	            </svg>
            </span>
            </a><!--//nav-link-->
            <div :id="`submenu-${menu.id}`" class="collapse submenu " :class="`submenu-${menu.id}`" data-bs-parent="#menu-accordion">
              <ul class="submenu-list list-unstyled" v-for="submenu in menu.children" :key="submenu.id">
                <li class="submenu-item"><a class="submenu-link " :class="isActive(submenu.menuUrl)" href="#"
                                            @click="clickLink($event,submenu)">{{ submenu.menuName}}</a></li>
              </ul>
            </div>
          </template>
          <template v-else>
            <a class="nav-link " :class="isActive(menu.menuUrl)" href="#" @click="clickLink($event,menu)">
              <span class="nav-icon" v-if="menu.menuIcon"> <i class="bi " :class="menu.menuIcon"></i></span>
              <span class="nav-link-text">{{ menu.menuName}}</span>
            </a><!--//nav-link-->
          </template>
        </li><!--//nav-item-->
      </ul><!--//app-menu-->
    </nav>
  </div>
</template>